<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <button class="btn1">存cookie</button>
    <button class="btn2">获取cookie</button>
    <button class="btn3">删除cookie</button>
    <script type="text/javascript">
      // 离线存储 ：通过浏览器功能来持久化保存数据
      // 1.cookie ： 小甜饼 ，就是浏览器用于存放数据的文件；
      // 如何使用？一、服务端操作cookie  二 通过客户端操作cookie；
      // 通过客户端操作cookie
      let btn1Ele = document.querySelector(".btn1");
      // 1.存cookie 2种过期时间的设置方法；
      btn1Ele.onclick = function () {
        // 设置过期时间  1.设置Max-Age= 过期时间（单位是秒）
        // document.cookie = "name=lisi111;Max-Age="+3600;
        // 2.设置  expires ：当前时间+过期时间  GTM 的字符串 ；
        let date = new Date();
        let nowTime = new Date().getTime();
        date.setTime(nowTime + 3600 * 1000);
        document.cookie = "name=lisi222;expires=" + date.toUTCString();
      };

      // 2.获取cookie 注意：1.cookie没有过期 2.cookie的作用域范围内 （域名、path：路径）
      let btn2Ele = document.querySelector(".btn2");
      btn2Ele.onclick = function () {
        console.log(document.cookie);
      };
    </script>
  </body>
</html>
